<template>
  <div>
    <h2>kim-vue-touch</h2>
    <div class="handle-wrapper" v-tap="handleTap">点击</div>
    <div class="handle-wrapper" v-longtap="handleLongTap">长按</div>
    <div class="handle-wrapper" v-swipeleft="handleSwipeLeft">左滑</div>
    <div class="handle-wrapper" v-swiperight="handleSwipeRight">右滑</div>
    <div class="handle-wrapper" v-swipeup="handleSwipeUp">上滑</div>
    <div class="handle-wrapper" v-swipedown="handleSwipeDown">下滑</div>
  </div>
</template>

<script>
import Vue from "vue";
import VueTouch from "kim-vue-touch";
Vue.use(VueTouch);
export default {
  name: "touch",
  data: () => ({}),
  computed: {},
  watch: {},
  methods: {
    handleTap() {
      console.log("点击");
    },
    handleLongTap() {
      console.log("长按");
    },
    handleSwipeLeft() {
      console.log("左滑");
    },
    handleSwipeRight() {
      console.log("右滑");
    },
    handleSwipeUp() {
      console.log("上滑");
    },
    handleSwipeDown() {
      console.log("下滑");
    }
  }
};
</script>

<style scoped>
.handle-wrapper {
  line-height: 100px;
}
</style>
